<template>
  <div>
    <el-upload :action="uploadUrl" list-type="picture-card"
      :on-preview="handlePictureCardPreview" 
      :on-remove="handleRemove" 
      :on-success="handleSuccess"
      :file-list="fileList"
      ref="upload"
      multiple>
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
import {uploadUrl,hosh} from '@/api/base'

export default {
  props:{
    fileList:{
      type:Array,
      default:function(){
        return
      }
    }
  },
  data() {
    return {
      uploadUrl,
      hosh,
      // fileList:[] //上传文件列表
    };
  },
  methods: {
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList){
      // url拼接：域名+相对路径 response.url是随机生成的一串数据加图片名称
      let url = response.url.slice(7)
      let imgUrl = hosh +'/'+ url  
      //this.fileList.push({name:response.name,url:imgUrl})
      //需要将imgUrl交给父组件，存在表单数据中
      this.$emit('sendImg',imgUrl)
    },
    clear(){
      // 调用组件自身方法
      this.$refs.upload.clearFiles()
    },
  }
}
</script> 

<style scoped></style>
